<template>

	<view class="container">

		<view class="navbar flex ml-[24rpx] mr-[24rpx] mb-[20rpx] pl-[20rpx]" @click="goPage('/bundle/pages/search/index')">
			<u-icon name="search" size="34" color="#3B84D3"></u-icon>
			<text class="flex items-center ml-[20rpx]">请输入关键词查询</text>
		</view>

		<view class="flex main">
			<view class="content">
				<scroll-view scroll-y="true" class="menu">
					<block v-for="(item, index) in categoryData" :key="item.id">
						<view class="truncate menu--item" :class="{'text-primary': index === current}"
							@click="current = index">
							{{ item.name }}
						</view>
					</block>
				</scroll-view>
				<view class="layout">
					<z-paging ref="paging" v-model="categoryData" @query="queryList" :fixed="false" height="100%"
						:loading-more-enabled="false">
						<!-- Content Start -->
						<view class="content-box">
							<block v-for="(item2, index2) in categoryData" :key="item2.id">
								<template v-if="index2 == current && !item2?.sons?.length">
									<cate-card :param="item2"></cate-card>
								</template>
								<template v-if="index2 == current && item2?.sons?.length">
									<block v-for="(item3, index3) in item2.sons" :key="item3.id">
										<cate-card :param="item3" :pid="item2.id"></cate-card>
									</block>
								</template>
							</block>
						</view>
						<!-- Content End -->
					</z-paging>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<Tabbar />
	</view>

</template>

<script lang="ts" setup>
	import { ref, shallowRef } from "vue"
	import CateCard from "./components/cate-card.vue"
	import Tabbar from "@/components/tabbar/tabbar.vue"
	import { apiGoodsCategoryLists } from '@/api/store'


	const categoryData = ref<Array<any>>([])
	const current = ref<number | null>(0)
	const paging = shallowRef()

	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await apiGoodsCategoryLists()
			paging.value.complete(data)
		} catch (e) {
			console.log('报错=>', e)
			//TODO handle the exception
			paging.value.complete(false)
		}
	}

	const goPage = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
		flex-direction: column;

		.navbar {
			height: 57rpx;
			color: #C5C5C5;
			border-radius: 28rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;
			border: 1rpx solid #3B84D3;
		}

		.main {
			flex: 1;
			min-height: 0;
			overflow: scroll;
			margin-bottom: -48px;
			padding-bottom: 24px;
			position: relative;
			z-index: 1;

			:deep(.zp-l-container) {
				box-sizing: content-box;
				padding-bottom: 16px;
			}

			::-webkit-scrollbar {
				display: none;
			}


			.content {
				width: 100%;
				height: 100%;
				display: flex;

				.layout {
					width: 100%;
				}

				// 左侧菜单分类
				.menu {
					width: 230rpx;
					height: 100%;
					padding-top: 10rpx;
					margin-right: 20rpx;
					background: #F6F6F6;
					box-sizing: border-box;

					&--item {
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						font-size: 26rpx;
						&.text-primary {
							color: #3B84D3;
							position: relative;
							&::before {
								content: '';
								position: absolute;
								left: 24rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 5rpx;
								height: 22rpx;
								background: #3B84D3;
							}
						}
					}
				}

				// 右侧内容
				.content-box {
					width: 100%;
					height: 100%;
					padding: 24rpx 24rpx 0 0;
				}
			}
		}
	}
</style>